<template>
	<view class="content">

		<my-top :topName="topName" :userName="userName" :buildingNo="userName" :type="titleType"></my-top>
		<view class="indexContent">
			<head-title :titleHead="titleHead" @dormitoryFun="dormitoryFun">
			</head-title>

			<view class="timePos">
				<view style="margin-top:-30rpx;margin-left: 40rpx;margin-bottom: 30rpx;">
					<span style="color:#8F8F94;">
						宿舍整体卫生情况
					</span>
				</view>
				<view style="display: flex; justify-content: space-around;margin-top:20rpx">
					<!-- <button class="clearBtn">优秀</button>
					<button class="clearBtn">良好</button>
					<button class="clearBtn">差</button> -->
					<button @click="healthSlec(1)" :class="[{'attBtnFontSlec':type=='优秀'},'clearBtn']">优秀</button>
					<button @click="healthSlec(2)" :class="[{'attBtnFontSlec':type=='良好'},'clearBtn']">良好</button>
					<button @click="healthSlec(3)" :class="[{'attBtnFontSlec':type=='差'},'clearBtn']">差</button>
				</view>
				<view class="attLine"></view>
			</view>
			<view class="timePos">
				<view style="margin-left: 50rpx;display: flex;">
					<view class="uni-title" style="color:#8F8F94;">短信通知宿管老师：</view>
					<view>
						<radio-group @change="radioChange">

							<label v-for="(item,index) in items" :key="item.value" style="margin-left: 10rpx;">
								<radio :value="item.value" :checked="item.value == current" />
								<text>{{item.name}}</text>
							</label>
						</radio-group>
					</view>
				</view>
				<textarea class="repText" v-model="repairDesc" placeholder="备注信息"></textarea>
				<view class="repDevice" style="margin-top:50upx;">拍照</view>
				<view>
					<view class="repDevice" style="position: relative;top:180rpx;left:200rpx">上传照片</view>
					<image @click="chooseImage" :src="imgShow" class="imgSty" mode=""></image>
				</view>

				<!-- <view class="logoSty"  ></view>	 -->

			</view>
		</view>
		<!-- <bottom-com :bottomArr="roleName!='部门经理'?attendanceTecArr:attendanceArr" :bottomName="bottomName"></bottom-com> -->
		<!-- <my-bottom :bottomArr="roleName!='部门经理'?attendanceTecArr:attendanceArr" :bottomName="bottomName"></my-bottom> -->

	</view>
</template>

<script>
	import topCom from '@/pages/component/topCom.vue'
	import bottomCom from '@/pages/component/bottom.vue'
	import headTitle from '@/pages/component/btnHeadeCom.vue'
	import * as imageConversion from 'image-conversion'
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/index.js'
	export default {
		name: 'dorManDetail',
		data() {
			return {
				file: {},
				repairDesc: '',
				bottomName: 'clear',
				imgShow: '',
				topName: '',
				dormitoryId: '',
				buildingNo: '',
				userName: '',
				titleHead: '宿舍卫生',
				dormitoryHealthArr: [{
					name: '欧阳修',
					grade: '差'
				}, {
					name: '杜甫',
					grade: '优秀'
				}, {
					name: '李白',
					grade: '良好'
				}, ],
				attendanceTecArr: [{
						name: 'clear',
						icon: 'iconfont icon-saoba',
						text: "卫生",
						path: '/pages_duty/dutyCheckWorkAttendance/dutyTecIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages_duty/dutyCheckWorkAttendance/dutyTecIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages_duty/dutyCheckWorkAttendance/dutyTecIndex'
					}
				],
				attendanceArr: [{
						name: 'clear',
						icon: 'iconfont icon-saoba',
						text: "卫生",
						path: '/pages_duty/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages_duty/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages_duty/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					}
				],
				type: "",
				studentNoArray: [],
				gradeArray: [],
				dorId: 0,
				titleType: '',
				roleName: '',
				patrolImg: '',
				loginName: '',
				photo: '',
				current: 0,
				items: [{
					value: '0',
					name: '否'
				}, {
					value: '1',
					name: '是'
				}],
				isInformCharge: '0',
			}
		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: "userInfo",
				success: (res) => {
					that.roleName = res.data
				}
			})
			uni.getStorage({
				key: 'loginName',
				success: (res) => {
					that.loginName = res.data
				}
			})
		},
		onLoad(options) {
			console.log(options)
			this.topName = options.topName
			this.dormitoryId = options.dormitoryId
			this.buildingNo = options.storeyId
			this.userName = options.buildingNo
			this.titleType = options.type


			// this.getSchoolPatrolDetails(this.dormitoryId)


		},
		mounted() {

			// this.getHygieneByDor()
		},
		methods: {
			getSchoolPatrolDetails(id) {
				this.$api.duty.getSchoolPatrolDetails(id).then(res => {
					if (res.data) {
						var patrolStatus = res.data.patrolStatus
						if (patrolStatus == 1) {
							this.type = '优秀'
						} else if (patrolStatus == 2) {
							this.type = '良好'
						} else {
							this.type = '差'
						}
						this.repairDesc = res.data.describeTxt;
						this.current = res.data.isInformCharge;
						this.imgShow = `${this.$baseAppUrl}common/downloadFileImg?filename=${res.data.patrolImg}`

					}
				})
			},
			healthSlecL(item, index) {
				if (index == 1) {
					item.grade = 1
				} else if (index == 2) {
					item.grade = 2
				} else {
					item.grade = 3
				}

			},
			healthSlec(index) {
				if (index == 1) {
					this.type = "优秀"
				} else if (index == 2) {
					this.type = "良好"
				} else {
					this.type = "差"
				}
			},

			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async res => {

						this.imgShow = res.tempFilePaths[0]; //500kb
						this.file = await imageConversion.compressAccurately(res.tempFiles[0], 500)

					}

				})
			},
			// base64转换成二进制
			convertBase64UrlToBlob(base64) {
				let urlData = base64.dataURL
				let type = base64.type
				let bytes = null
				if (urlData.split(',').length > 1) { //是否带前缀
					bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
				} else {
					bytes = window.atob(urlData)
				}
				// 处理异常,将ascii码小于0的转换为大于0
				let ab = new ArrayBuffer(bytes.length)
				let ia = new Uint8Array(ab)
				for (let i = 0; i < bytes.length; i++) {
					ia[i] = bytes.charCodeAt(i)
				}
				// var name1 = Symbol("name");
				// name1 = name1 + 'jpeg'

				return new Blob([ab], {
					type: type
				})
			},
			dormitoryFun() {
				wx.showLoading({
					title: '提交中'
				})

				var grade = 1
				if (this.type == "优秀") {
					grade = 1
				} else if (this.type == '良好') {
					grade = 2
				} else {
					grade = 3
				}
				// let base64 = {
				// 	              dataURL:this.photo,//用url方式表示的base64图片数据
				// 	              type: 'image/jpeg',//文件类型
				// 				  name:Symbol(),
				// 	            }
				// var img=this.convertBase64UrlToBlob(base64)		
				// imageConversion.compressAccurately(img, 500).then(res => {
				// 	uni.showLoading({
				// 		title: '图片上传中',
				// 		mask: true
				// 	});
				// 	let test = Symbol('test');
				// 	var name1 = test.toString().concat('.jpeg')
				// 	res = new File([res], name1, {
				// 		type: res.type,
				// 		lastModified: Date.now()
				// 	})
				// 	var form = new FormData();
				// 	form.append("file", res);
				if (!this.imgShow) {
					this.patrolImg = ''

					uni.showToast({
						title: "提交成功"
					})

					this.$api.duty.createOrUpdatePatrolInfoDor(this.dormitoryId, grade, 1, this.repairDesc,
						this.patrolImg, this.loginName, this.isInformCharge).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '操作成功',

							})

							setTimeout(() => {
								uni.navigateTo({
									url: `/pages_duty/dutyCheckWorkAttendance/dutyDorList?storeyId=${this.buildingNo}&buildingNo=${this.userName}&type=卫生`
								})
							}, 1000)


						} else {
							uni.showToast({
								title: '操作失败',
								icon: "none"
							})
						}

					})
				} else {


					uni.uploadFile({
						url: uni.url + "common/uploadFile",
						filePath: this.imgShow,
						name: "file",
						formData: {
							name: 'admin'
						},
						file: this.file,
						success: res => {
							console.log(JSON.parse(res.data).data);
							this.$api.duty.createOrUpdatePatrolInfoDor(this.dormitoryId, grade, 1, this
								.repairDesc, JSON.parse(res.data).data, this.loginName, this.isInformCharge
							).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '操作成功',

									})
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages_duty/dutyCheckWorkAttendance/dutyDorList?storeyId=${this.buildingNo}&buildingNo=${this.userName}&type=卫生`
										})
									}, 1000)


								} else {
									uni.showToast({
										title: '操作失败',
										icon: "none"
									})
								}
							})
						}
					})
				}
				// else {
				// 		this.$http.post('common/uploadFile', form).then(res => {
				// 			this.patrolImg = res.data.data
				// 			this.$api.duty.createOrUpdatePatrolInfoDor(this.dormitoryId, grade, 1, this
				// 				.repairDesc, this.patrolImg,this.loginName).then(res => {
				// 				if (res.code == 200) {
				// 					uni.showToast({
				// 						title: '操作成功',

				// 					})
				// 					setTimeout(() => {
				// 						uni.navigateTo({
				// 							url: `/pages/dutyCheckWorkAttendance/dutyDorList?storeyId=${this.buildingNo}&buildingNo=${this.userName}&type=卫生`
				// 						})
				// 					}, 1000)


				// 				} else {
				// 					uni.showToast({
				// 						title: '操作失败',
				// 						icon: "none"
				// 					})
				// 				}
				// 			})
				// 		})
				// 	}

				// })
				// dormitoryId,dvType,patrolType,describeTxt,patrolImg
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value == evt.target.value) {
						this.current = i;
						break;
					}
				}
				this.isInformCharge = this.current
				console.log(this.isInformCharge, 988)
			}
		},

	}
</script>

<style>
	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 550rpx;
		height: 300upx;
		margin-left: 50rpx;
		margin-top: 30rpx;
		padding: 10upx;
		/* margin-left:90rpx; */
		margin-top: 0rpx
	}

	.repText {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 550rpx;
		height: 150upx;
		margin-left: 50rpx;
		margin-top: 30rpx;
		padding: 10upx;
	}

	.repCheckout {
		display: flex;
		/* justify-content: space-between; */
		align-content: center;
		flex-wrap: wrap;
		font-size: 36rpx;
		color: #808080;
		margin-top: 30upx;
		width: 100%;

		/* margin-left:50upx; */
	}

	.leaveLine {
		margin-top: 10rpx;
		width: 220upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		/* bottom: -10upx; */
		left: -30upx;
		margin-bottom: 40rpx;
	}

	.repDevice {
		text-align: left;
		font-size: 42rpx;
		color: #808080;
		padding-left: 50upx;
	}

	.attBtnFontSlec {
		border: solid #007AFF !important;
		border-radius: 15upx;
		font-size: 32rpx;
		color: white !important;
		background-color: #007AFF;
	}

	.attLine {
		margin-top: 10rpx;
		width: 640rpx;
		height: 2rpx;
		background: #C0C0C0;
		position: relative;
		bottom: -20rpx;
		left: 10rpx;
	}

	.clearBtn {
		width: 160rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #0000FF;
		text-align: center;
		border: 1px solid #0000FF;
		line-height: 60rpx !important;
	}

	.timePos {
		position: relative;
		top: 0px;
		right: 0px;
		background: white;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		font-size: 38rpx;
	}
</style>
